<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix header-box">
        <span>招聘信息管理</span>
        <el-input placeholder="请输入内容" v-model="inputName" style="width: 300px;" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="search(true)"></el-button>
        </el-input>
      </div>
      <div style="min-width: 1200px;">
        <el-table  stripe :data="tableData.slice((currentPage4 - 1) * pageSize, currentPage4 * pageSize)" style="width: 100%">
          <el-table-column prop="id" label="id" align="center" />
          <el-table-column prop="trade_name" label="企业" align="center" />
          <el-table-column prop="address" label="企业地址" align="center" />
          <el-table-column prop="industry" label="行业" align="center" />
          <el-table-column prop="people_scale" label="规模" align="center" />
          <el-table-column prop="post_name" label="需求岗位" align="center" />
          <el-table-column prop="education" label="学历" align="center" />
          <el-table-column prop="salary" label="薪资" align="center" />
          <el-table-column prop="date" label="创建时间" width="300" align="center" />
          <el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="min" icon="el-icon-plus" @click="addPostFn"></el-button>
              <el-button type="primary" size="min" icon="el-icon-edit" @click="updatePostFn(scope.row)"></el-button>
              <el-button type="primary" size="min" icon="el-icon-delete" @click="removeFn(scope.row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage4" :page-sizes="[3, 5, 7, 10]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!-- 对话框 -->
    <el-dialog :title="isEdit ? '编辑招聘信息' : '添加招聘信息'" :visible.sync="addVisible" width="35%">
      <el-form :model="addForm" :rules="addRules" ref="addRef" label-width="80px">
        <el-form-item label="企业信息" prop="trade_name">
          <el-input v-model="addForm.trade_name" />
        </el-form-item>

        <el-form-item label="企业地址" prop="address">
          <el-input v-model="addForm.address" />
        </el-form-item>

        <el-form-item label="行业" prop="industry">
          <el-input v-model="addForm.industry" />
        </el-form-item>

        <el-form-item label="人数规模" prop="people_scale">
          <el-input v-model="addForm.people_scale" />
        </el-form-item>


        <el-form-item label="需求岗位" prop="post_name">
          <el-input v-model="addForm.post_name" />
        </el-form-item>


        <el-form-item label="学历" prop="education">
          <el-input v-model="addForm.education" />
        </el-form-item>


        <el-form-item label="薪资" prop="salary">
          <el-input v-model="addForm.salary" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancelFn">取 消</el-button>
        <el-button size="mini" type="primary" @click="addFn">添 加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPostAPI, addPostAPI, updatePostAPI,delPostAPI } from '@/api/post'
export default {
  data() {
    return {
      tableData: [],
      inputName: '',
      currentPage4: 1,
      pageSize: 10,
      total: 20,
      addVisible: false,
      editId: '',
      isEdit: false,
      addForm: {
        trade_name: '',
        address: '',
        industry: '',
        people_scale: '',
        post_name: '',
        education: '',
        salary: '',
      },
      addRules: {
        trade_name: [
          { required: true, message: '请输入企业名称', trigger: 'blur' },
          { pattern: /^\S{1,30}$/, message: '企业名必须是1-30位的非空字符', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入企业地址', trigger: 'blur' },
          { pattern: /^\S{1,10}$/, message: '企业地址必须是1-10位的非空字符', trigger: 'blur' }
        ],
        industry: [
          { required: true, message: '请输入企业所在行业', trigger: 'blur' },
          { pattern: /^\S{1,20}$/, message: '企业所在行业必须是1-10位的非空字符', trigger: 'blur' }
        ],
        people_scale: [
          { required: true, message: '请输入企业人数规模', trigger: 'blur' },
          { pattern: /^\S{1,10}$/, message: '企业人数规模必须是1-10位的非空字符', trigger: 'blur' }
        ],
        post_name: [
          { required: true, message: '请输入所需岗位', trigger: 'blur' },
          { pattern: /^\S{1,10}$/, message: '所需岗位必须是1-10位的非空字符', trigger: 'blur' }
        ],
        education: [
          { required: true, message: '请输入所需学历', trigger: 'blur' },
          { pattern: /^\S{1,10}$/, message: '所需学历必须是1-10位的非空字符', trigger: 'blur' }
        ],
        salary: [
          { required: true, message: '请输入薪资', trigger: 'blur' },
          { pattern: /^\S{1,10}$/, message: '薪资必须是1-10位的非空字符', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = 1
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val
    },
    search(bool) {
      if (bool) {
        let newListData = []
        if (this.inputName) {
          this.tableData.filter((item) => {
            if (item.post_name.indexOf(this.inputName) !== -1) {
              newListData.push(item)
            }
          });
        }
        this.tableData = newListData;
      } else {
        window.location.reload();
      }
    },
    async initGetPostFn() {
      const res = await getPostAPI()
      console.log(res);
      if (res.status !== 200) {
        this.$message.error('获取数据失败!')
      } else {
        this.$message.success('获取数据成功！')
        this.tableData = res.data.data
        this.total = res.data.total
      }
    },
    // 对话框取消按钮事件回调
    cancelFn() {
      this.addVisible = false
    },
    // 对话框添加按钮事件回调
    async addFn() {
      // 表单预验证
      this.$refs.addRef.validate(async (valid) => {
        if (valid) {
          if (this.isEdit) {
            const { data: res } = await updatePostAPI({ id: this.isEdit, ...this.addForm })
            if (res.status !== 0) {
              this.$message.error('修改数据失败!')
            } else {
              this.$message.success('修改数据成功!')
            }
          } else {
            const { data: res } = await addPostAPI(this.addForm)
            if (res.status !== 0) {
              this.$message.error('新增数据失败!')
            } else {
              this.$message.success('新增数据成功!')
            }
          }
          this.addVisible = false
          this.$refs.addRef.resetFields()
          this.initGetPostFn()
        }
      })
    },
    // 添加事件按钮回调
    addPostFn() {
      this.addVisible = true
      this.editId = ''
      this.isEdit = false
      this.$refs.addRef.resetFields()
    },
    // 修改按钮事件回调
    updatePostFn(obj) {
      this.editId = obj.id
      this.isEdit = true
      this.addVisible = true
      // 数据回显
      this.$nextTick(() => {
        this.addForm.trade_name = obj.trade_name
        this.addForm.address = obj.address
        this.addForm.industry = obj.industry
        this.addForm.people_scale = obj.people_scale
        this.addForm.post_name = obj.post_name
        this.addForm.education = obj.education
        this.addForm.salary = obj.salary
      })
    },
    // 删除按钮事件回调
    async removeFn(id){
      const {data:res} = await delPostAPI(id)
    if(res.status !== 0){
      this.$message.error('删除数据失败!')
    }else{
        this.$message.success('删除数据成功！')
        this.initGetPostFn()
    }
    }
  },
  watch: {
    inputName(newValue) {
      if (newValue) {
        this.search(true)
      } else {
        this.search(false)
      }
    }
  },
  created() {
    this.initGetPostFn()
  }
}
</script>

<style scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 10px;
}
</style>
